<template>
  <div id="type">
    <header>
      <div class="dv">
        <div class="iconfont dv-0" @click="back">&#xe84f;</div>
        <headers :title="title" class="dv-1">
        </headers>
        <div class="iconfont dv-2"></div>
      </div>
    </header>
    <div id="box">
      <div id="left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item v-for="(item,i) in list" :key="i" :title="item.title"/>
        </van-sidebar>
      </div>
      <div id="right">
        <span>
          {{ this.lists.title}}
        </span>
        <van-grid :gutter="10" :column-num="3" :border="false" square>
          <van-grid-item v-for="(item,i) in lists.list" :key="i">
            <van-image :src="item.imgPath"/>
            {{ item.title }}
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import headers from "@/components/headers/myheader";
import navbar from "@/components/navbar/navbar";

export default {
  name: 'type',
  props: {},
  data() {
    return {
      activeKey: 0,
      title: '商品分类',
      list: [],
      lists: [],
    };
  },
  // 子组件转换
  components: {headers, navbar},
  // 数据引入
  mounted() {
    this.onChange(0)
    this.$axios({
      method: 'get',
      url: 'http://api.com/category'
    }).then((response) => {
      this.list = response.data.aside;
    })
  },
  created() {
  },
  //点击函数事件
  methods: {
    onChange(v) {
      console.log(v)
      this.$axios({
        method: 'get',
        url: 'http://api.com/category'
      }).then(() => {
        this.lists = this.list[v];
        console.log(this.lists)
      })
    },
    back() {
      this.$router.back()
    }
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
navbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}

#type {
  //overflow: auto;
  overflow: hidden;

  header {
    text-align: center;

    .dv {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-content: center;
      box-sizing: border-box;
      font-size: .4rem;

      div {
        height: 8vh;
        display: inline-block;
        box-sizing: content-box;
        text-align: center;
      }

      .dv-1 {
        height: 2vh;
        line-height: 4vh;
        flex: 5;
        text-align: center;

        /deep/ div {
          width: 100%;
        }
      }

      .dv-2 {
        height: 2vh;
        line-height: 4vh;
        flex: 1;

      }

      .dv-0 {
        font-size: .4rem;
        line-height: 7vh;
        flex: 1;

      }
    }
  }

  #box {
    height: calc(100vh - 8vh);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    box-sizing: border-box;

    #left {
      height: calc(100vh - 8vh);
      width: 30%;

      /deep/ navbar {
      }
    }

    #right {
      width: 70%;
      position: relative;
      display: flex;
      flex-direction: column;
      font-size: .2rem;

      span {
        display: block;
        text-align: left;
        font-size: .4rem;
        margin-bottom: 10px;
        padding: 20px 0;
      }
    }
  }
}

</style>